<!-- src/components/SvgIcon.vue -->
<template>
  <svg 
    :class="svgClass" 
    aria-hidden="true"
    :width="size"
    :height="size"
  >
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup>
import { defineProps } from 'vue'

// 接收的 props（适配 Element Plus 图标用法）
const props = defineProps({
  // 图标名称（对应 SVG 文件名称）
  name: {
    type: String,
    required: true
  },
  // 图标大小（默认继承父元素，与 Element 图标一致）
  size: {
    type: [Number, String],
    default: '1em'
  },
  // 额外类名（用于自定义样式）
  class: {
    type: String,
    default: ''
  }
})

// 拼接 symbolId（对应 Vite 配置中的格式）
const symbolId = `#icon-${props.name}`
// 组合类名
const svgClass = props.class ? `svg-icon ${props.class}` : 'svg-icon'
</script>

<style scoped>
.svg-icon {
  /* 关键：让图标颜色继承父元素文字颜色（适配按钮状态） */
  color: inherit;
  /* 垂直居中（与文字对齐） */
  vertical-align: middle;
}
</style>